<template>
    <div class="compare-phone">
        <van-nav-bar left-arrow @click-left="$router.back(-1)" :fixed="true" :title="$t('m.FindPhone')"
                     style="color:#fff;">
        </van-nav-bar>
        <div style="margin-top:46px">
            <van-cell :title="$t('m.AllBrands')" value="" label="" class="orange"/>
            <van-collapse v-model="activeNameTwo" accordion>
                <van-collapse-item :title="item.text" :name="item.id" v-for="item in allPhoneBrand" :key="item.id">
                    <div class="loading-area" v-if="loading">
                        <van-loading type="spinner"/>
                    </div>
                    <div v-if="modelData.length>0" v-for="itm in modelData" class="brand-type"
                         @click="goToDetail(itm.id)">
                        {{itm.text}}
                    </div>
                </van-collapse-item>
            </van-collapse>
        </div>
    </div>
</template>
<script>
    // import popularPhoneBrand from "../../static/json/popularPhoneBrand"
    import phoneBrand from "../../static/json/phoneBrand"
    // import brandForModel from "../../static/json/brandForModel"
    import {getModelJson} from '../../static/api/zxy_api';


    export default {
        data() {
            return {
                activeNameTwo: '2',
                // popularPhoneBrand,
                phoneBrand,
                // brandForModel,
                modelData: [],
                loading: false,
            };
        },
        methods: {
            // getModelData(id) {
            //     return brandForModel.values[id] || []
            // },
            goToDetail(id) {
                this.$router.push({
                    path: '/compare-phone/phone-detail',
                    query: {
                        propertyValueId: id
                    }
                })
            }
        },
        watch: {
            activeNameTwo: function (val) {
                this.modelData = []
                this.loading = true
                if (val) {
                    getModelJson(val)
                        .then(res => {
                            this.loading = false
                            if (res.data.errorID == 0) {
                                this.modelData = res.data.object
                            }
                            else {
                                this.$toast(res.data.message)
                            }
                        })
                        .catch(err => {
                            this.loading = false
                            console.log(err)
                        })
                }
            }
        },
        computed: {
            allPhoneBrand() {
                return this.phoneBrand.properties.values || []
            }
        },
    }
</script>
<style>
    .compare-phone .van-nav-bar {
        background-color: #f90;
    }

    .compare-phone .van-nav-bar .van-icon {
        color: #fff;
        margin-right: 15px;
        font-size: 18px;
    }

    .orange {
        color: rgb(255, 102, 0) !important;
    }

    .compare-phone .van-cell__value {
        color: black;
    }

    .brand-type {
        padding: 5px;
        line-height: 30px;
        height: 30px;
        border-bottom: solid 1px rgba(33, 33, 33, .1);
    }

    .brand-type:nth-last-child(1) {
        border-bottom: none;
    }

    .loading-area {
        display: flex;
        justify-content: center;
    }

</style>
